<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/reset.css">
</head>

<body>
    <div class="bigbox">
        <!-- 头部 begin -->
        <header>
            <div class="container">
                <div class="logo">
                    <h1>MODUS versus</h1>
                </div>
                <div class="navl">
                    <ul>
                        <li class="active">HOME</li>
                        <li>ABOUT</li>
                        <li>SERVICES</li>
                        <li class="aaa">PORTFOLIO
                            <ul class="whha">
                                <li>PORTFOLIO 2column page</li>
                                <li>PORTFOLIO 2column page</li>
                                <li>PORTFOLIO 2column page</li>
                            </ul>
                        </li>
                        <li>BLOG</li>
                        <li>FEATURES</li>
                        <li>CONTACTS</li>
                        <li><img class="auto-img" src="./1.07.31/images/fangdajing.png" alt=""></li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- 头部 end -->

        <!-- 轮播图 begin -->
        <div class="banner bannertext">
            <span class="prev"></span>
            <span class="next"></span>
            <img class="auto-img" style="z-index: 1;"  src="./1.07.31/images/banner-1.jpg" alt="">
        </div>
        <!-- 轮播图 end -->

        <!-- 主要内容 -->
        <main>

            <div class="banner-bottom">
                <div class="container">
                    <div class="pagination"></div>
                    <div class="pagination active"></div>
                    <div class="pagination"></div>
                </div>
            </div>

            <!-- some -->
            <section class="some">
                <div class="container">
                    <div class="some-text">
                        <li>Some of our top services</li>
                        <li>Ut eleifend libero sed neque rhoncus consequat. Maecenas tincidunt, augue et rutrum
                            condimentum, libero lectus mattis orci, ut commodo.
                        </li>
                    </div>
                    <div class="some-btn">VIEW MORE</div>
                </div>
            </section>
            <!-- some -->

            <!-- list -->
            <section class="list">
                <div class="container">
                    <ul class="list-ul">
                        <li>
                            <div class="list-ul-img"><img src="./1.07.31/images/未标题-3.png" alt="">
                                SUSPENDISSE
                            </div>
                            <div class="list-ul-text">Quisque id ellus quis risus vehicula
                                vehicula ut turpis. In eros nulla, placerat
                                vitae at, vehicula ut nunc.</div>
                            <div class="list-ul-foot">read more</div>
                        </li>
                        <li>
                            <div class="list-ul-img"><img src="./1.07.31/images/未标题-4.png" alt="">
                                MAECENAS
                            </div>
                            <div class="list-ul-text">Ut eleifend libero sed neque rhoncus
                                consequat. Maecenas tincidunt, augue
                                et rutrum condimentum, libero lectusmalsori,commodo.</div>
                            <div class="list-ul-foot">read more</div>
                        </li>
                        <li>
                            <div class="list-ul-img"><img src="./1.07.31/images/未标题-5.png" alt="">
                                ALIQUAM
                            </div>
                            <div class="list-ul-text">Vivamus eget ante bibendum arcu
                                vehicula utricies. Integer venenatis
                                mattis nisl, vitae pulvinar dui tempor.
                                non.</div>
                            <div class="list-ul-foot">read more</div>
                        </li>
                        <li>
                            <div class="list-ul-img"><img src="./1.07.31/images/未标题-6.png" alt="">
                                HABITASSE
                            </div>
                            <div class="list-ul-text">Astehicula ulricies.Integer venenatis
                                mattis nisl, vitae pulvinar dui tempor
                                non.</div>
                            <div class="list-ul-foot">read more</div>
                        </li>
                    </ul>
                </div>
            </section>
            <!-- list -->

            <section class="why">
                <div class="container">
                    <div class="why-bigtext">WHY MODUS VERSUS?</div>
                    <div class="why-smelltext">Capacitance cascading integer reflective interface data development high
                        bus cache dithering transponder.
                    </div>
                    <div class="why-bot-img">
                        <ul class="why-bot-img-ul">
                            <li>
                                <div><img src="./1.07.31/images/未标题-7.png" alt="" srcset=""></div>
                                <div></div>
                            </li>
                            <li>
                                <div><img src="./1.07.31/images/未标题-8.png" alt=""></div>
                                <div></div>
                            </li>
                            <li>
                                <div><img src="./1.07.31/images/未标题-7.png" alt="" srcset=""></div>
                                <div></div>
                            </li>
                        </ul>
                    </div>

                </div>
            </section>

            <section class="uswhy">
                <div class="container">
                    <div class="conter-left">
                        <h1 >Why Choose Us?</h1>
                        <li class="qinajian">Quisque at massa ipsum</li>
                        <li class="qinajian">Maecenas a lorem augue, egestas</li>
                        <li class="qinajian">Cras vitae felis at lacus eleifend</li>
                        <li class="qinajian">Etiam auctor diam pellentesque</li>
                        <li class="qinajian">Nulla ac massa at dolor</li>
                        <li class="qinajian">Condimentum eleifend vitae vitae</li>
                    </div>
                    <div class="conter">
                        <p>Curabitur quis nisl in leo euismod venenatis eu in diam. Etiam auctor diam pellentesque
                            lectus vehicula mattis. Nulla ac massa at dolor condimentum eleifend vitae vitae urna.
                        </p>
                        <ul class="conter-ul">
                            <li>
                                <img src="./1.07.31/images/50circle.png" alt="">
                                <p>SUPPENDISSE</p>
                            </li>
                            <li><img src="./1.07.31/images/70circle.png" alt="">
                                <p>MAECENAS</p>
                            </li>
                            <li><img src="./1.07.31/images/80circle.png" alt="">
                                <p>ALIQUAM</p>
                            </li>
                            <li><img src="./1.07.31/images/100circle.png" alt="">
                                <p>HABITASSE</p>
                            </li>
                        </ul>
                    </div>
                    <div class="conter-right">
                        <h1>What Client's Say ?</h1>
                        <div>Curabitur quis nisl in leo euismod venenatis eu in diam. Etiam auctor diam pellentesque
                            lectus vehicula mattis. Nulla ac massa at dolor condimentum</div>
                        <h2>Jhon Doe</h2>
                    </div>
                </div>
            </section>

            <section class="our">
                <div class="container">
                    <div class="our-top">
                        <h1>Our Happy Clients</h1>
                        <div class="our-top-he">
                            <hr>
                        </div>
                        <div class="our-top-btn">
                            <li><img class="auto-img" src="./1.07.31/images/prev.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/next.png" alt=""></li>
                        </div>
                    </div>
                    <div class="our-bottom">
                        <ul class="our-bottom-ul">
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                            <li><img class="auto-img" src="./1.07.31/images/jquery.png" alt=""></li>
                        </ul>
                    </div>
                </div>
            </section>
        </main>
        <!-- 主要内容 -->
    </div>
</body>

</html>